<template>
  <div class="wms">
    <div class="wms-banner">
        <div class="wms-border">
            <!-- 左侧列 -->
            <div class="wms-left">
                <div class="warehouse-maganer">
                   <div class="warehouse-title">
                       <div class="right-icon"></div>
                       <p>入库管理</p>
                       <div class="left-icon"></div>
                   </div>
                   <div class="warehouse-message">
                       <div class="left-bordericon"></div>
                       <div class="right-bordericon"></div>
                       <div class="rightbo-bordericon"></div>
                       <div class="leftbo-bordericon"></div>
                       <div class="message">
                           <p>供货商</p>
                           <div class="orderId">入库单号</div>
                           <div class="warehouse-time">入库时间</div>
                       </div>
                       <div class="warehouse-nubmer" v-for="(item,index) in warehouseList" :key="index">
                        <div>{{item.supplierName}}</div>
                        <p>{{item.inStockOrderNo}}</p>
                        <div>{{item.inStockTime}}</div>
                        </div>
                    </div> 
                </div>
                <div class="stock-maganer">
                   <div class="warehouse-title">
                       <div class="right-icon"></div>
                       <p>备货管理</p>
                       <div class="left-icon"></div>
                   </div>
                   <div class="warehouse-message">
                       <div class="left-bordericon"></div>
                       <div class="right-bordericon"></div>
                       <div class="rightbo-bordericon"></div>
                       <div class="leftbo-bordericon"></div>
                       <div class="message">
                           <p>待备货单号</p>
                           <div class="orderId">计划送货日期</div>
                           <div class="warehouse-time">最早送货日期</div>
                       </div>
                       <div class="warehouse-nubmer"  v-for="(item,index) in StockList" :key="index">
                        <div>{{item.stockOrderNo}}</div>
                        <p>{{item.planDateTime}}</p>
                        <div>{{item.earliestDateTime}}</div>
                        </div>
                    </div> 
                </div>
            </div>
            <div class="wms-middle">
                <div class="wms-middle-more">
                </div>
            </div>
            <!-- 右侧列 -->
            <div class="wms-right">
                <div class="journal">
                    <div class="warehouse-title">
                       <div class="right-icon"></div>
                       <p>日志</p>
                       <div class="left-icon"></div>
                    </div>
                    <div class="warehouse-message">
                       <div class="left-bordericon"></div>
                       <div class="right-bordericon"></div>
                       <div class="rightbo-bordericon"></div>
                       <div class="leftbo-bordericon"></div>
                       <div class="message">
                           <p>操作类型</p>
                           <div class="journalConent">操作内容</div>
                           <div class="orderId">操作人</div>
                           <div class="warehouse-time">时间</div>
                       </div>
                       <div class="warehouse-nubmer" v-for="(item,index) in OperationList" :key="index">
                        <div>{{item.operation}}</div>
                        <div>{{item.status}}</div>
                        <p>{{item.userName}}</p>
                        <div>{{item.createTime}}</div>
                       </div>
                    </div> 
                </div>
                <div class="material-warning">
                    <div class="warehouse-title">
                       <div class="right-icon"></div>
                       <p>物料预警</p>
                       <div class="left-icon"></div>
                    </div>
                    <div class="warehouse-message">
                       <div class="left-warningicon"></div>
                       <div class="right-warningicon"></div>
                       <div class="rightbo-warningicon"></div>
                       <div class="leftbo-warningicon"></div>
                       <div class="message">
                           <p>物料编号</p>
                           <div class="journalConent">库存</div>
                           <div class="numeNer">数量</div>
                           <text class="warningValue">预警</text>
                           <text class="Value">限值</text>
                           <div class="max">最大值</div>
                           <div class="min">最小值</div>
                           <div class="warehouse-time">预警时间</div>
                       </div>
                       <div class="warehouse-nubmer" v-for="(item,index) in MaterialList" :key="index">
                        <p>{{item.partNum}}</p>
                        <div>{{item.partCount}}</div>
                        <div>{{item.arrivalWarningTime}}</div>
                        <div>{{item.bigNum}}</div>
                        <div>{{item.smallNum}}</div>
                        <p>{{item.warningDate}}</p>
                       </div>
                    </div> 
                </div>
                <div class="outbound-statistic">
                    <div class="warehouse-title">
                       <div class="right-icon"></div>
                       <p>月出库量统计</p>
                       <div class="left-icon"></div>
                    </div>
                    <div class="echarts">
                        <Chart ref="chartData" :option="option"></Chart>  
                    </div> 
                    <div class="left-warningicon"></div>
                    <div class="right-warningicon"></div>
                    <div class="rightbo-warningicon"></div>
                    <div class="leftbo-warningicon"></div>
                </div>
            </div>
        </div>
        <div class="wms-bigScreen"></div>
    </div>
  </div>
</template>

<script>
import {onMounted, reactive, ref, toRefs} from 'vue'
import * as echarts from 'echarts'
import  Chart from './component/Chart.vue'
import {websocket} from '@/api/websocket'
import { getqueryInStockList ,getqueryStockList, getqueryMaterialList, getqueryOutStockCount,getLogOperationList} from "@/api/bigsc";
import { getLoginInfo } from '@/api/user'
export default {
  components: { Chart },
  setup(){
    const chartData = ref(null)
    const state = reactive({
        warehouseList:[],
        StockList:[],
        MaterialList:[],
        OperationList:[],
        ChartdataList:[],
        DatedataList:[],
        option:{},
        ws:'',
        path:``,
        timeoutObj: null,
        serverTimeoutObj: null,
        timeout: 15000 //60ms
    })
    state.option = {
                title:{
                    text:'单',
                    left:35, 
                    top:20,
                        textStyle:{
                        fontSize:'12',
                        fontFamily: 'PingFang SC',
                        color:'rgba(255,255,255,.3)',
                    }
                    },
                    legend: {
                        data: ['出库单量'],
                        bottom:20,
                        textStyle:{
                            color:'rgba(255,255,255,.7)',     
                        },
                        selectedMode:false,
                            itemStyle:{
                            color:'#00a8ff',
                        },
                        lineStyle: {
                            width: 1,
                            color:'#00a8ff',
                            type: "solid"
                        },
                        itemHeight:2
                    },
                    xAxis: {
                        type: 'category',
                        // data: ['01', '02', '03', '04', '05', '06', '07','08','09','10','11','12']
                        data:state.DatedataList
                    },
                    yAxis: {
                        type: 'value',
                        splitLine:{
                            show: true,     //控制分割线是否显示
                            lineStyle:{       //分割线的样式
                                color: ['#094B85'],
                                type: 'solid'
                            }, 
                        },
                        splitNumber:4,
                        max:10000,
                        min:0, 
                        interval:2500,
                        axisTick:{       //y轴刻度线不显示
                            show:true,
                            length:4,
                        },
                        axisLine:{
                            show:true,  
                        },
                        axisLabel: {
                            formatter: function(value) {
                              return value + "";
                            }
                        },
                        scale:true
                    },
                    tooltip:{
                        show:true,
                        trigger: 'axis'
                    },
                    series: [
                        {   
                            name:'出库单量',
                            // data: [7500, 5100, 6000, 5000, 7500, 7000, 6000,5000,6200,7500,7300,4800],
                            data:state.ChartdataList,
                            type: 'line',
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                offset: 0,
                                    color: 'rgba(0,65,206,1)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0,65,206,0.1)'
                                }
                                ])
                            },
                        }
                    ]  
    };
    // 入库
    const getqueryInStock = () =>{  
        getqueryInStockList().then(res=>{
            state.warehouseList = res.data
        })
    }
    getqueryInStock();
    // 待备货
    const getqueryStock = () =>{
        getqueryStockList().then(res =>{
            state.StockList = res.data
        })
    }
    getqueryStock();
    // 操作日志
    const getOperationList = () =>{
        getLogOperationList().then(res=>{
            state.OperationList = res.data
        })
    }
    getOperationList();
    // 物料预警
    const getqueryMaterial = () =>{
        getqueryMaterialList().then(res=>{
            state.MaterialList = res.data;
        })
    }
    getqueryMaterial();
    // 月出库量
    const getqueryOutStock = () =>{ 
        getqueryOutStockCount().then(res=>{
            console.log(state.option,'444444'); 
            res.data.forEach((item)=>{
                state.DatedataList.push(item.createTime);
                state.ChartdataList.push(item.statistical);
            });
        })
    }
    onMounted(()=>{
        getqueryOutStock();
    })
    // 获取用户信息
    const getUserData = () => {
        getLoginInfo().then((res) =>{
            state.path = `ws://192.168.1.26:8088/websocket/`+ res.data.id
            establishConnect() 
        })
    }
    getUserData()
    // 建立连接
    const establishConnect = async () =>{
         if (typeof (WebSocket) === "undefined") {
                alert("您的浏览器不支持socket")
            }else{
               const options = {
                    url: state.path,
                    pingMsg: "heartbeat"
                }
                let ws = await websocket(options) 
                state.ws = ws
                ws.onopen = () => {
                    console.log('启动心跳')
                    start()
                }
                ws.onmessage = (res) =>{
                const data = JSON.parse(res.data)
                console.log(res.data,'------------',state.warehouseList,data.inStock);
                 if(Object.prototype.hasOwnProperty.call(data,'inStock')){
                     state.warehouseList = [];
                     state.warehouseList.push(...data.inStock)     // 入库
                 }else if(Object.prototype.hasOwnProperty.call(data,'stock')){
                    state.StockList = [];                               // 待备货
                    state.StockList.push(...data.stock)                                       
                 }else if(Object.prototype.hasOwnProperty.call(data,'outStock')){
                    state.ChartdataList = [];                           // 月出库
                    state.DatedataList = [];      
                    data.outStock.forEach((item)=>{
                        state.DatedataList.push(item.createTime);
                        state.ChartdataList.push(item.statistical);
                    }); 
                    state.option.series[0].data = state.ChartdataList
                    state.option.xAxis.data = state.DatedataList
                 }else if(Object.prototype.hasOwnProperty.call(data,'alertInfo')){
                    state.MaterialList = [];                            // 物料
                    state.MaterialList.push(...data.alertInfo)                                     
                 }else if(Object.prototype.hasOwnProperty.call(data,'logOperation ')){
                    state.OperationList = [];                           // 日志
                    state.OperationList.push(...data.logOperation)                              
                 }
                 reset()
                };
            } 
    }
    // 启动心跳
    const start = () => {
        state.timeoutObj = setTimeout(()=> {
            state.ws.send("heartbeat");
            state.serverTimeoutObj = setTimeout(()=> {
                state.ws.close();
            },state.timeout)
        },state.timeout)
    }
    // 重置心跳
    const reset = () => {
            clearTimeout(state.timeoutObj);
            clearTimeout(state.serverTimeoutObj);
            start();
    }
    return {
    getUserData,
    reset,
    start,
    establishConnect,
    chartData,
    ...toRefs(state),
    }
  }
}
</script>

<style scoped lang="scss">
.wms {
    height: 13.5rem;
    .wms-banner {
        position: relative;
        background: url("~@/assets/images/bgc-banner.png") no-repeat;
        background-size: 100% 100%;
        height: 100%;
        .wms-border {
            overflow: hidden;
            background: url("~@/assets/images/big-border.png") no-repeat;
            background-size: 100% 100%;
            width: 100%;
            height: 100%;
            .wms-left { 
                width: 5.975rem;
                height: 100%;
                margin-left: 36px;
                .warehouse-maganer {
                    position: relative;
                    height: 5.95rem;
                    overflow: hidden;
                    margin-top: 1.0625rem;
                    background: url('~@/assets/images/manger-banner.png') no-repeat;
                    background-size: 100% 100%;
                    .warehouse-title {
                        position: absolute;
                        width: 100%;
                        margin-top: .0875rem;
                        height: .4625rem;
                        background: url('~@/assets/images/warehouse-title.png') no-repeat;
                        background-size: 100% 100%;
                        .right-icon {
                            position: absolute;
                            top: .15rem;
                            left: 1.5rem;
                            width: .625rem;
                            height: .175rem;
                            background: url('~@/assets/images/right-icon.png') no-repeat;
                        }
                        .left-icon {
                            position: absolute;
                            background: url('~@/assets/images/left-icon.png') no-repeat;
                            width: .625rem;
                            height: .175rem; 
                            right: 1.5rem;
                            top: .15rem;
                        }
                        P{
                            height: 100%;
                            display: block;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: .2rem;
                            color: #31ABE3;
                        }
                    }
                    .warehouse-message{
                        padding:0 .3125rem;
                        // height: 476px;
                        overflow: hidden;
                        .message{
                            display: flex;
                            align-items: center;
                            height: .5rem;
                            line-height: .5rem;
                            margin-top: .6rem;
                            color: #FFFFFF;
                            font-size: .175rem;
                            p {
                               position: absolute;
                               left: .5625rem; 
                            }
                            .orderId{
                                position: absolute;
                                left: 2.075rem;
                            }
                            .warehouse-time{
                               position: absolute;
                               right: .9125rem; 
                            }
                        }
                        .warehouse-nubmer{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            width: 100%;
                            height: .3rem;
                            padding:0 .25rem;
                            margin-top: .0625rem;
                            color: #ffffff;
                            background-color: rgba(0, 150, 255, 0.1);
                            font-size: .15rem;
                        }
                        .left-bordericon{
                            position: absolute;
                            left: .05rem;
                            top: .05rem;
                            height: .15rem;
                            width: .1625rem;
                            background: url('~@/assets/images/left-bordericon.png') no-repeat;
                            background-size: 100% 100%;
                        }
                        .right-bordericon{
                            position: absolute;
                            right: .05rem;
                            top: .05rem;
                            height: .15rem;
                            width: .1625rem;
                            background: url('~@/assets/images/right-bordericon.png') no-repeat;;
                        }
                        .rightbo-bordericon{
                            position: absolute;
                            right: .05rem;
                            bottom: .05rem;
                            height: .15rem;
                            width: .1625rem;
                            background: url('~@/assets/images/rightbo-bordericon.png') no-repeat;;
                        }
                        .leftbo-bordericon{
                            position: absolute;
                            left: .05rem;
                            bottom: .05rem;
                            height: .15rem;
                            width: .1625rem;
                            background: url('~@/assets/images/leftbo-bordericon.png') no-repeat;;
                        }
                    }      
                }
                .stock-maganer{
                    position: relative;
                    height: 5.95rem;
                    overflow: hidden;
                    margin-top: .1875rem;
                    background: url('~@/assets/images/manger-banner.png') no-repeat;
                    background-size: 100% 100%;
                    .warehouse-title {
                        position: absolute;
                        width: 100%;
                        margin-top: .0875rem;
                        height: .4625rem;
                        background: url('~@/assets/images/warehouse-title.png') no-repeat;
                        background-size: 100% 100%;
                        .right-icon {
                            position: absolute;
                            top: .15rem;
                            left: 1.5rem;
                            width: .625rem;
                            height: .175rem;
                            background: url('~@/assets/images/right-icon.png') no-repeat;
                        }
                        .left-icon {
                            position: absolute;
                            background: url('~@/assets/images/left-icon.png') no-repeat;
                            width: .625rem;
                            height: .175rem; 
                            right: 1.5rem;
                            top: .15rem;
                        }
                        P{
                            // text-align: center;
                            height: 100%;
                            display: block;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: .2rem;
                            color: #31ABE3;
                        }
                    }
                    .warehouse-message{
                        padding:0 .3125rem;
                        overflow: hidden;
                        .message{
                            display: flex;
                            align-items: center;
                            height: .5rem;
                            line-height: .5rem;
                            margin-top: .6rem;
                            color: #FFFFFF;
                            font-size: .175rem;
                            p {
                               position: absolute;
                               left: .5625rem; 
                            }
                            .orderId{
                                position: absolute;
                                left: 2.475rem;
                            }
                            .warehouse-time{
                               position: absolute;
                               right: .575rem; 
                            }
                        }
                        .warehouse-nubmer{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            width: 100%;
                            height: .3rem;
                            padding:0 .25rem;
                            margin-top: .0625rem;
                            color: #ffffff;
                            background-color: rgba(0, 150, 255, 0.1);
                            font-size: .15rem;
                        }
                        .left-bordericon{
                            position: absolute;
                            left: .05rem;
                            top: .05rem;
                            height: .15rem;
                            width: .1625rem;
                            background: url('~@/assets/images/left-bordericon.png') no-repeat;
                            background-size: 100% 100%;
                        }
                        .right-bordericon{
                            position: absolute;
                            right: .05rem;
                            top: .05rem;
                            height: .15rem;
                            width: .1625rem;
                            background: url('~@/assets/images/right-bordericon.png') no-repeat;;
                        }
                        .rightbo-bordericon{
                            position: absolute;
                            right: .05rem;
                            bottom: .05rem;
                            height: .15rem;
                            width: .1625rem;
                            background: url('~@/assets/images/rightbo-bordericon.png') no-repeat;;
                        }
                        .leftbo-bordericon{
                            position: absolute;
                            left: .05rem;
                            bottom: .05rem;
                            height: .15rem;
                            width: .1625rem;
                            background: url('~@/assets/images/leftbo-bordericon.png') no-repeat;;
                        }
                    }  
                }
            }
            .wms-middle{
                position:absolute;
                bottom:.875rem;
                right: 6.725rem; 
                .wms-middle-more{
                    //  overflow: hidden;
                    background: url("~@/assets/images/bg-middle.png") no-repeat;
                    background-size: 100% 100%;
                    width: 10.4375rem;
                    height: 7.3rem;
                }
            }
            .wms-right{
                position: absolute;
                top: 0;
                right: .45rem;
                width: 6.0375rem;
                margin-top: 1.1625rem;
                .journal{
                    position: relative;
                    width: 6.0375rem;
                    height: 3.8125rem;
                    overflow: hidden;
                    background: url('~@/assets/images/right-banner.png') no-repeat;
                    background-size: 100% 100%;
                    .warehouse-title {
                        position: absolute;
                        width: 100%;
                        margin-top: .0875rem;
                        height: .4625rem;
                        background: url('~@/assets/images/warehouse-title.png') no-repeat;
                        background-size: 100% 100%;
                        .right-icon {
                            position: absolute;
                            top: .15rem;
                            left: 1.5rem;
                            width: .625rem;
                            height: .175rem;
                            background: url('~@/assets/images/right-icon.png') no-repeat;
                        }
                        .left-icon {
                            position: absolute;
                            background: url('~@/assets/images/left-icon.png') no-repeat;
                            width: .625rem;
                            height: .175rem; 
                            right: 1.5rem;
                            top: .15rem;
                        }
                        P{
                            // text-align: center;
                            height: 100%;
                            display: block;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: .2rem;
                            color: #31ABE3;
                        }
                    }
                    .warehouse-message{
                        padding:0 .3125rem;
                        height: 3.7rem;
                        overflow: hidden;
                        .message{
                            display: flex;
                            align-items: center;
                            height: .5rem;
                            line-height: .5rem;
                            margin-top: .6rem;
                            color: #FFFFFF;
                            font-size: .175rem;
                            p {
                                position: absolute;
                                left: .45rem;
                                font-size: .15rem;
                            }
                            .journalConent{
                                position: absolute;
                                left: 1.575rem;   
                                font-size: .15rem;
                            }
                            .orderId{
                                position: absolute;
                                left: 2.8125rem;
                                font-size: .15rem;
                            }
                            .warehouse-time{
                               position: absolute;
                               right: 1.6rem; 
                               font-size: .15rem;
                            }
                        }
                        .warehouse-nubmer{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            padding: 0 .125rem;
                            width: 100%;
                            height: .3rem;
                            margin-top: .0625rem;
                            color: #ffffff;
                            background-color: rgba(0, 150, 255, 0.1);
                            font-size: .15rem;
                           
                        }
                        .left-bordericon{
                            position: absolute;
                            left: --0.0125rem;
                            top: --0.0125rem;
                            height: .15rem;
                            width: .1625rem;
                            background: url('~@/assets/images/left-bordericon.png') no-repeat;
                            background-size: 100% 100%;
                        }
                        .right-bordericon{
                            position: absolute;
                            right: --0.0125rem;
                            top: --0.0125rem;
                            height: .15rem;
                            width: .1625rem;
                            background: url('~@/assets/images/right-bordericon.png') no-repeat;;
                        }
                        .rightbo-bordericon{
                            position: absolute;
                            right: --0.0125rem;
                            bottom: --0.0125rem;
                            height: .15rem;
                            width: .1625rem;
                            background: url('~@/assets/images/rightbo-bordericon.png') no-repeat;;
                        }
                        .leftbo-bordericon{
                            position: absolute;
                            left: --0.0125rem;
                            bottom: --0.0125rem;
                            height: .15rem;
                            width: .1625rem;
                            background: url('~@/assets/images/leftbo-bordericon.png') no-repeat;;
                        }
                    }                  
                } 
                .material-warning {
                    position: relative;
                    width: 6.0375rem;
                    height: 3.8125rem;
                    margin-top: .25rem;
                    overflow: hidden;
                    background: url('~@/assets/images/right-banner.png') no-repeat;
                    background-size: 100% 100%;
                    .warehouse-title {
                        position: absolute;
                        width: 100%;
                        margin-top: .0875rem;
                        height: .4625rem;
                        background: url('~@/assets/images/warehouse-title.png') no-repeat;
                        background-size: 100% 100%;
                        .right-icon {
                            position: absolute;
                            top: .15rem;
                            left: 1.5rem;
                            width: .625rem;
                            height: .175rem;
                            background: url('~@/assets/images/right-icon.png') no-repeat;
                        }
                        .left-icon {
                            position: absolute;
                            background: url('~@/assets/images/left-icon.png') no-repeat;
                            width: .625rem;
                            height: .175rem; 
                            right: 1.5rem;
                            top: .15rem;
                        }
                        P{
                            height: 100%;
                            display: block;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: .2rem;
                            color: #31ABE3;
                        }
                    }
                    .warehouse-message{
                        padding:0 .3125rem;
                        height: 3.7rem;
                        overflow: hidden;
                        .message{
                            display: flex;
                            align-items: center;
                            height: .5rem;
                            line-height: .5rem;
                            margin-top: .6rem;
                            color: #FFFFFF;
                            font-size: .175rem;
                            p {
                                position: absolute;
                                left: .4375rem;
                                font-size: .15rem;
                            }
                            .numeNer{
                                position: absolute;
                                font-size: .15rem;
                                top: .7125rem;
                                left: 2.15rem;  
                            }
                            .journalConent{
                                position: absolute;
                                top: .525rem;
                                left: 2.15rem; 
                                font-size: .15rem;  
                            }
                            .warningId{
                                font-size: .15rem;
                            }
                            .warningValue{
                                position: absolute;
                                left: 2.6875rem;
                                top: .525rem;
                                font-size: .15rem;
                            }
                            .Value{
                                position: absolute;
                                height: .3375rem;
                                font-size: .15rem;
                                top: .7125rem;
                                left: 2.6875rem;    
                            }
                            .max{
                                position: absolute;
                                left: 3.1375rem;
                                font-size: .15rem;
                            }
                            .min{
                                position: absolute;
                                right: 1.9125rem;
                                font-size: .15rem; 
                            }
                            .warehouse-time{
                               position: absolute;
                               right: 1.15rem; 
                               font-size: .15rem;
                            }
                        }
                        .warehouse-nubmer{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            width: 100%;
                            height: .3rem;
                            padding: 0 .125rem;
                            margin-top: .0625rem;
                            color: #ffffff;
                            background-color: rgba(0, 150, 255, 0.1);
                            font-size: .15rem;
                            div {
                                width: .125rem;
                            }
                           
                        }
                        .left-warningicon{
                            position: absolute;
                            left: --0.0125rem;
                            top: --0.0125rem;
                            height: .15rem;
                            width: .1625rem;
                            background: url('~@/assets/images/left-bordericon.png') no-repeat;
                            background-size: 100% 100%;
                        }
                        .right-warningicon{
                            position: absolute;
                            right: --0.0125rem;
                            top: --0.0125rem;
                            height: .15rem;
                            width: .1625rem;
                            background: url('~@/assets/images/right-bordericon.png') no-repeat;;
                        }
                        .rightbo-warningicon{
                            position: absolute;
                            right: --0.0125rem;
                            bottom: --0.0125rem;
                            height: .15rem;
                            width: .1625rem;
                            background: url('~@/assets/images/rightbo-bordericon.png') no-repeat;;
                        }
                        .leftbo-warningicon{
                            position: absolute;
                            left: --0.0125rem;
                            bottom: --0.0125rem;
                            height: .15rem;
                            width: .1625rem;
                            background: url('~@/assets/images/leftbo-bordericon.png') no-repeat;;
                        }
                    }   
                }
                .outbound-statistic{
                    position: relative;
                    width: 6.0375rem;
                    height: 3.8125rem;
                    margin-top: .25rem;
                    overflow: hidden;
                    background: url('~@/assets/images/right-banner.png') no-repeat;
                    background-size: 100% 100%;
                    .warehouse-title {
                        position: absolute;
                        width: 100%;
                        margin-top: .0875rem;
                        height: .4625rem;
                        background: url('~@/assets/images/warehouse-title.png') no-repeat;
                        background-size: 100% 100%;
                        .right-icon {
                            position: absolute;
                            top: .15rem;
                            left: 1.5rem;
                            width: .625rem;
                            height: .175rem;
                            background: url('~@/assets/images/right-icon.png') no-repeat;
                        }
                        .left-icon {
                            position: absolute;
                            background: url('~@/assets/images/left-icon.png') no-repeat;
                            width: .625rem;
                            height: .175rem; 
                            right: 1.5rem;
                            top: .15rem;
                        }
                        P {
                            height: 100%;
                            display: block;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: 16px;
                            color: #31ABE3;
                        }
                    }
                    .echarts{
                        margin-top: .5rem;
                        margin-left: .125rem;
                    }
                    .left-warningicon{
                            position: absolute;
                            left: --0.0125rem;
                            top: --0.0125rem;
                            height: .15rem;
                            width: .1625rem;
                            background: url('~@/assets/images/left-bordericon.png') no-repeat;
                            background-size: 100% 100%;
                    }
                    .right-warningicon{
                            position: absolute;
                            right: --0.0125rem;
                            top: --0.0125rem;
                            height: .15rem;
                            width: .1625rem;
                            background: url('~@/assets/images/right-bordericon.png') no-repeat;;
                    }
                    .rightbo-warningicon{
                            position: absolute;
                            right: --0.0125rem;
                            bottom: --0.0125rem;
                            height: .15rem;
                            width: .1625rem;
                            background: url('~@/assets/images/rightbo-bordericon.png') no-repeat;;
                    }
                    .leftbo-warningicon{
                            position: absolute;
                            left: --0.0125rem;
                            bottom: --0.0125rem;
                            height: .15rem;
                            width: .1625rem;
                            background: url('~@/assets/images/leftbo-bordericon.png') no-repeat;;
                    }
                }
            }
        }
        .wms-bigScreen  {
            position: absolute;
            background: url("~@/assets/images/wms-bigScreen.png") no-repeat ; 
            width: 4.5125rem;
            height: .625rem;
            top: .3rem;
            left: 50%;
            margin-left: --2.25rem;
            background-size: 100% 100%;
        }
    }
}
</style>

